﻿<template>
  <div class="searchbox">
    <el-row>
      <el-col class="dt" :span="3">图书名：</el-col>
      <el-col class="dd" :span="7">
        <el-input class="wide" v-model="data.bookName" clearable placeholder="图书名" size="mini" />
      </el-col>
      <el-col class="dt" :span="3">作者：</el-col>
      <el-col class="dd" :span="7">
        <el-input class="wide" v-model="data.bookAuthor" clearable placeholder="作者" size="mini"/>
      </el-col>

      
    </el-row>

    <el-row>
      <el-col class="dt" :span="3">图书号：</el-col>
      <el-col class="dd" :span="7">
        <el-input class="wide" v-model="data.bookNo" clearable placeholder="图书名" size="mini" />
      </el-col>
      <el-col class="dt" :span="3">出版社：</el-col>
      <el-col class="dd" :span="7">
        <el-input class="wide" v-model="data.bookPublisher" clearable placeholder="出版社" size="mini"/>
      </el-col>

      <el-col :span="4" class="dd text-right">
        <el-button size="mini" type="danger" @click="handleSearch">检索</el-button>
      </el-col>
    </el-row>
    <el-row class="query-condition">
      <el-col class="dt" :span="3">搜索条件：</el-col>
      <el-col class="dd" :span="16">
        <el-tag v-for="query in queryDict" :key="query.key" size="small" closable @close="onCloseTag(query.key)">
          <span class="tag-key">{{query.keyName}}:</span>{{query.text}}
        </el-tag>
      </el-col>
      <el-col class="dd text-right" :span="5">
        <el-button size="mini" @click="onResetSearch">重置条件</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryDict: [],
      data: {
        bookName: '',
        bookAuthor: '',
        bookNo: '',
        bookPublisher: '',
      
      },
    };
  },
  methods: {
    handleChange(){
      this.$emit('query-change', this.data);
    },
    handleSearch(){
      if (this.data.bookName !== '') {
        this.buildQueryDict('bookName', '图书名', this.data.bookName);
      } else {
        let index = this.queryDict.findIndex(x => x.key === 'bookName');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      if (this.data.bookAuthor !== '') {
        this.buildQueryDict('bookAuthor', '作者', this.data.bookAuthor);
      } else {
        let index = this.queryDict.findIndex(x => x.key === 'bookAuthor');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      if (this.data.bookNo !== '') {
        this.buildQueryDict('bookNo', '图书号', this.data.bookNo);
      } else {
        let index = this.queryDict.findIndex(x => x.key === 'bookNo');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      if (this.data.bookPublisher !== '') {
        this.buildQueryDict('bookPublisher', '出版社', this.data.bookPublisher);
      } else {
        let index = this.queryDict.findIndex(x => x.key === 'bookPublisher');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }

      this.handleChange();
    },
    onResetSearch() {
      this.data.bookName = '';
      this.data.bookAuthor = '';
      this.data.bookN0 = '';
      this.data.bookPublisher = '';

      this.queryDict = [];
      this.handleChange();
    },
    buildQueryDict(key, keyName, text) {
      let index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
      }
      if (text != null && text !== '') {
        this.queryDict.push({
          key: key,
          keyName: keyName,
          text: text
        });
      }
    },
    onCloseTag(key) {
      let index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
        this.removeKey(key);
      }
      this.handleChange();
    },
    removeKey(key) {
      switch (key) {
       case 'bookName':
         this.data.bookName = '';
         break;
         case 'bookAuthor':
         this.data.bookAuthor = '';
         break;
         case 'bookN0':
         this.data.bookN0 = '';
         break;
         case 'bookPublisher':
         this.data.bookPublisher = '';
         break;

      }
    },
  }
};
</script>
